<template>
  <div class="mod-config">
    <div v-if="isLoginJs.isLogin()">
      <NavBarComponent :title="title"></NavBarComponent>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button v-if="true" type="primary" @click="addOrUpdateHandle()">新增</el-button>
          <el-button v-if="true" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        :max-height="domHeight - 230"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="culturalProductNo"
          header-align="center"
          align="center"
          label="文创编号">
        </el-table-column>
        <el-table-column
          prop="culturalProductId"
          header-align="center"
          align="center"
          label="文创id">
        </el-table-column>
        <el-table-column
          prop="culturalProductName"
          header-align="center"
          align="center"
          label="文创名字">
        </el-table-column>
        <el-table-column
          prop="culturalProductContent"
          header-align="center"
          align="center"
          label="文创介绍">
        </el-table-column>
        <el-table-column
          prop="culturalProductImg"
          header-align="center"
          align="center"
          label="文创图片">
        </el-table-column>
        <!-- <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          header-align="center"
          align="center"
          label="">
        </el-table-column> -->
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.culturalProductNo)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.culturalProductNo)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
    <div v-else>
      <h1 class="login-tip">请先登录</h1>
    </div>
  </div>
</template>

<script>
import AddOrUpdate from './culturalproduct-add-or-update'
import NavBarComponent from '@/components/navBar'
import { getCulturalProductList, getCulturalProductListByFuzzyQuery, deleteCulturalProductList } from '@/api/culturalproduct'
export default {
  name: 'culProView',
  data () {
    return {
      title: '文创管理',
      // 浏览器窗口内部宽度
      domWidth: document.documentElement.clientWidth,
      // 浏览器窗口内部高度
      domHeight: document.documentElement.clientHeight,
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate,
    NavBarComponent
  },
  created () {
    this.getDataList()
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    async getDataList () {
      this.dataListLoading = true
      if (this.dataForm.key === '') {
        const { data } = await getCulturalProductList(this.pageIndex, this.pageSize, this.dataForm.key)
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false

        // this.$http({
        //   url: '/culturalproduct/listWeb',
        //   method: 'get',
        //   params: {
        //     page: this.pageIndex,
        //     limit: this.pageSize,
        //     key: this.dataForm.key
        //   }
        // }).then(({ data }) => {
        //   if (data && data.code === 0) {
        //     this.dataList = data.page.list
        //     this.totalPage = data.page.totalCount
        //   } else {
        //     this.dataList = []
        //     this.totalPage = 0
        //   }
        //   this.dataListLoading = false
        // })
      } else {
        const { data } = await getCulturalProductListByFuzzyQuery(this.pageIndex, this.pageSize, this.dataForm.key)
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false

        // this.$http({
        //   url: '/culturalproduct/listByFuzzyQuery',
        //   method: 'get',
        //   params: {
        //     page: this.pageIndex,
        //     limit: this.pageSize,
        //     key: this.dataForm.key
        //   }
        // }).then(({ data }) => {
        //   if (data && data.code === 0) {
        //     this.dataList = data.page.list
        //     this.totalPage = data.page.totalCount
        //   } else {
        //     this.dataList = []
        //     this.totalPage = 0
        //   }
        //   this.dataListLoading = false
        // })
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      const ids = id
        ? [id]
        : this.dataListSelections.map(item => {
          return item.culturalProductNo
        })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await deleteCulturalProductList(ids)
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        } else {
          this.$message.error(data.msg)
        }

        // this.$http({
        //   url: '/culturalproduct/delete',
        //   method: 'post',
        //   data: {
        //     culturalProductNos: ids
        //   }
        // }).then(({ data }) => {
        //   if (data && data.code === 0) {
        //     this.$message({
        //       message: '操作成功',
        //       type: 'success',
        //       duration: 1500,
        //       onClose: () => {
        //         this.getDataList()
        //       }
        //     })
        //   } else {
        //     this.$message.error(data.msg)
        //   }
        // })
      }).catch(() => {
        // 取消操作
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>
<style scoped>
  .login-tip {
    display: flex;
    justify-content: center;
  }
</style>
